<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title id="divTitle"> 新建功能 </title>
    <link rel="stylesheet" type="text/css" href="/css/style.css" />

    <style type="text/css">
        *, body {
            margin: 0px;
            font-family: '微软雅黑';
        }
    </style>
    <script src="/js/jquery-1.10.2.min.js"></script>
    <script src="/js/jquery.form.js"></script>
    <script src="/js/generic.js"></script>
</head>

<body>


<form id="filePost" method="post" enctype="multipart/form-data" onsubmit="return false;">
    <table class="maintable">
        <tr>
            <td class="rightmaintd" valign="top">
                <div style="width:920px;margin:10px auto;"> <a href="/systemfunction">&lt;  返回</a> </div>
                <table class="logintable" cellpadding="8" style="margin-top:20px;">
                    <tr>
                        <td width="100" hidden="true">功能ID</td>
                        <td hidden="true"> <input type="text" id="ID" class="logininput"></td>
                    </tr>
                    <tr>
                        <td width="100">功能名称</td>
                        <td><input type="text" id="Name" class="logininput"></td>
                    </tr>
                    <tr>
                        <td>URL</td>
                        <td><input type="text" id="URL" class="logininput"></td>
                    </tr>
                    <tr>
                        <td>备注</td>
                        <td><input type="text" id="Remark" class="logininput"></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td><input type="button" value="创&nbsp;&nbsp;建" class="denglubtn" id="saveButton" >  </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</form>

</body>
</html>
<script type="text/javascript">
    var saveButton = document.getElementById('saveButton');
    saveButton.addEventListener('click', function() {
        // 获取输入框中的数据
        var name= document.getElementById('Name').value;
        if(name=="") {
            alert("请输入功能名称！");
            return;
        }
        var url = document.getElementById('URL').value;
        var remark=document.getElementById('Remark').value;
        // 创建要发送的数据对象
        var data = {
            name: name,
            url: url,
            remark: remark
        };

        // 发送 POST 请求
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/systemfunction/', true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                // 请求完成并成功处理后的回调函数
                console.log('数据已成功发送至后端');
                alert("创建成功！");
                window.location.href="/systemfunction";
            }
        };
        xhr.send(JSON.stringify(data));
    });
</script>